<template>
	<view class="container">
		<div v-if="!showSignUpFlag && !showForgotPasswordFlag" class="form-container">
			<p class="title">邮箱登录</p>
			<form class="form">
				<input v-model="loginEmail" type="email" class="input" placeholder="邮箱">
				<input v-model="loginPassword" type="password" class="input" placeholder="密码">
				<p class="page-link">
					<span class="page-link-label" @click="showForgotPassword">忘记密码?</span>
				</p>
				<button type="submit" class="form-btn tracking-widest" @click="submitLogin">登录</button>
			</form>
			<p class="sign-up-label">
				还没有账号?<span class="sign-up-link" @click="showSignUp">注册</span>
			</p>
		</div>
		<div v-if="showForgotPasswordFlag" class="form-container">
			<p class="title">找回密码</p>
			<form class="form">

				<van-cell-group inset>
					<input required v-model="email2" id="inputemail" name="email" type="email" class="input"
						placeholder="请输入邮箱">
					<input v-if="smsCodeFlag" type="password" class="input" placeholder="输入密码" v-model='password2'>

					<view class="verify"
						style="display: flex;width: 100%;vertical-align: middle;justify-content: space-between;padding: 2vh 5vw;height: auto;">
						<input class="inputsms" type="text" placeholder="请输入验证码" v-model="smsCode"
							style="border-bottom: 1px solid #8799a3;width: 60%;height: 5vh;" />
						<van-button :disabled="canGetFindCode" size="small" @click="getFindcode" type="primary">{{
			getCodeFindButtonText }}</van-button>
					</view>
				</van-cell-group>
				<button class="form-btn tracking-widest" @click="ToBack">修改</button>
			</form>
			<p class="sign-up-label">
				通过邮箱<span class="sign-up-link" @click="showForgotPassword">登录</span>
			</p>
		</div>

		<div v-if="showSignUpFlag && !showForgotPasswordFlag" class="form-container">
			<p class="title">注册</p>
			<form class="form">
				<input type="email" class="input" placeholder="请输入邮箱" v-model='email'>

				<input v-if="smsCodeFlag" type="nickname" class="input" placeholder="设置昵称" v-model='name'>
				<input v-if="smsCodeFlag" type="password" class="input" placeholder="设置密码" v-model='password'>

				<van-cell-group style="width: 100%; display: flex;margin: 0;" inset>
					<view class="verify"
						style="display: flex;width: 100%;vertical-align: middle;justify-content: space-between;padding: 2vh 5vw;height: auto;">
						<input class="inputsms" type="text" placeholder="请输入验证码" v-model="sms"
							style="border-bottom: 1px solid #8799a3;width: 60%;height: 5vh;" />
						<van-button :disabled="canGetCode" size="small" @click="getRegistercode" type="primary">{{
			getCodeButtonText }}</van-button>
					</view>
				</van-cell-group>
				<button class="form-btn tracking-widest" @click="toReg">注册</button>
			</form>
			<p class="sign-up-label">
				已经有账号?<span class="sign-up-link" @click="showSignUp">登录</span>
			</p>
		</div>
	</view>
</template>

<script setup>
	import {
		login,
		regin,
		getRegisteremailcode,
		verfryEmail,
		forgetPassword,
		getFindBackemailcode
	} from '@/store/api.js'
	// import {
	// 	flat
	// } from 'vant/lib/utils';
	import {
		ref,
		computed
	} from 'vue'
	console.log(uni.getStorageSync('a_tk'))
	if (uni.getStorageSync('a_tk')) {
		uni.switchTab({
			url: '/pages/Home/Home'
		})
	} else {
		uni.navigateTo({
			url: '/pages/Login/Login'
		})
	}
	const email = ref('')
	const email2 = ref('')
	const log = ref(true)
	const loginEmail = ref('')
	const loginPassword = ref('')
	const password = ref('') //注册密码
	const password2 = ref('') //注册验证码
	const sms = ref('') //注册的验证码
	const smsCode = ref('') //找回密码的验证码
	const timer = ref(60)
	const timer2 = ref(60)
	const name = ref('')
	const showSignUpFlag = ref(false)
	const showForgotPasswordFlag = ref(false)
	const showForgotPassword = () => {
		showForgotPasswordFlag.value = !showForgotPasswordFlag.value
	}
	const smsCodeFlag = ref(false)
	const toReg = () => { //注册
		uni.showLoading({
			title: '注册中'
		})
		regin(name.value, email.value, password.value, sms.value).then(res => {
			showSignUpFlag.value = false
			showForgotPasswordFlag.value = false // 回到登录框
			loginEmail.value = email.value
			loginPassword.value = password.value // 将注册信息回填到登录框，提高用户体验
			uni.hideLoading()
		}).catch(err => {
			uni.hideLoading()
		})
	}
	const canGetCode = ref(false)
	const canGetFindCode = ref(false)
	const getCodeButtonText = computed(() => {
		return !canGetCode.value ? '获取验证码' : `${timer.value}秒后重试`;
	});
	const getCodeFindButtonText = computed(() => {
		return !canGetFindCode.value ? '获取验证码' : `${timer2.value}秒后重试`;
	});
	const showSignUp = () => {
		showSignUpFlag.value = !showSignUpFlag.value
	}
	const submitLogin = () => { //邮箱登录
		uni.showLoading({
			title: '登录中'
		})
		login(loginEmail.value, loginPassword.value).then(res => {
			uni.hideLoading()
		})
	}
	const toLogin = () => {

		uni.showLoading({
			title: '登录中...'
		});
		setTimeout(function() {
			login(loginEmail.value, loginPassword.value);
			uni.hideLoading()
		}, 500);
	}
	//获取验证码
	const getRegistercode = async () => {
		console.log(email.value)
		if (email.value) {
			let result = await verfryEmail(email.value)//验证是否已经注册过
			console.log(result)
			if (result) { // true：未注册过，可以注册  false：注册过，不能注册 
				// 发送验证码到邮箱的逻辑
				console.log(`发送验证码到邮箱: ${email.value}`);
				let data = {
					email: email.value
				}
				getRegisteremailcode(data)
				// getRegisteremailcode(data)
				// 禁用按钮并开始计时
				smsCodeFlag.value = true
				canGetCode.value = true;
				let intervalId = setInterval(() => {
					if (timer.value > 0) {
						timer.value--;
					} else {
						clearInterval(intervalId);
						canGetCode.value = false;
						timer.value = 60; // 重置计时器
					}
				}, 1000);
			} else {
				uni.showToast({
					icon: 'error',
					title: '该邮箱已注册'
				})
			}
		} else {
			uni.showToast({
				icon: 'error',
				title: '请输入邮箱'
			})
		}
	}
	const getFindcode = () => {
		if (email2.value) {
			smsCodeFlag.value = true
			if (verfryEmail(email2.value)) {
				// 发送验证码到邮箱的逻辑
				console.log(`发送验证码到邮箱: ${email.value}`);
				let data = {
					email: email2.value
				}
				getFindBackemailcode(data)
				canGetFindCode.value = true;
				// 禁用按钮并开始计时
				let intervalId = setInterval(() => {
					if (timer2.value > 0) {
						timer2.value--;
					} else {
						clearInterval(intervalId);
						canGetFindCode.value = false;
						timer2.value = 60; // 重置计时器
					}
				}, 1000);
			} else {
				uni.showToast({
					icon: 'error',
					title: '邮箱尚未注册'
				})
			}
		} else {
			uni.showToast({
				icon: 'error',
				title: '请输入邮箱'
			})
		}
	}
	const ToBack = () => { //找回密码
		uni.showLoading({
			title: '找回中'
		})
		forgetPassword(password2.value, email2.value, smsCode.value).then(res => {
			uni.hideLoading()
			showForgotPasswordFlag.value = false
			showSignUpFlag.value = false //回到登录框
			loginEmail.value = email2.value
			loginPassword.value = password2.value // 将注册信息回填到登录框，提高用户体验
		}).catch(err => {
			uni.hideLoading()
		})
	}
	const verifyCodefindpassword = (event) => {
		event.preventDefault();
		console.log(email.value)
	}
</script>

<style scoped>
	.van-cell-group--inset {
		margin: 0;
		width: 100%;
	}

	.input {
		height: 90px
	}

	@media screen and (min-width: 600px) {
		.container {
			width: 100% !important;
			display: flex;
			justify-content: center;
		}

		.inputsms {
			width: 50px;
			margin-right: 40px;

		}

		.form-container {
			width: 80%;
		}

		.verify {
			justify-content: space-between;
			display: flex;
			padding: 0;
			margin: 0;
		}

	}

	.container {
		width: 100vw;

	}

	.form-container {

		/* width: 350px;
	height: 500px; */
		/* width: 50%; */
		background-color: #fff;
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 20px 30px;
	}

	.title {
		text-align: center;
		font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
			"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
		margin: 10px 0 30px 0;
		font-size: 28px;
		font-weight: 800;
	}

	.form {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 18px;
		margin-bottom: 15px;
	}

	.input {
		height: 40px;
		border-radius: 20px;
		border: 1px solid #c0c0c0;
		outline: 0 !important;
		box-sizing: border-box;
		padding: 12px 15px;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	.page-link {
		text-decoration: underline;
		margin: 0;
		text-align: end;
		color: #747474;
		text-decoration-color: #747474;
		margin-bottom: 20px;
	}

	.page-link-label {
		cursor: pointer;
		font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
			"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
		font-size: 9px;
		font-weight: 700;
	}

	.page-link-label:hover {
		color: #000;
	}

	.form-btn {
		padding: 10px 15px;
		font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
			"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
		border-radius: 20px;
		border: 0 !important;
		outline: 0 !important;
		background: teal;
		color: white;
		cursor: pointer;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

	}

	.form-btn:active {
		box-shadow: none;
	}

	.sign-up-label {
		margin: 0;
		font-size: 10px;
		color: #747474;
		font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
			"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	}

	.sign-up-link {
		margin-left: 1px;
		font-size: 11px;
		text-decoration: underline;
		text-decoration-color: teal;
		color: teal;
		cursor: pointer;
		font-weight: 800;
		font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
			"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	}

	.buttons-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-top: 20px;
		gap: 15px;
	}

	.apple-login-button,
	.google-login-button {
		border-radius: 20px;
		box-sizing: border-box;
		padding: 10px 15px;
		box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
			rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
			"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
		font-size: 11px;
		gap: 5px;
	}

	.apple-login-button {
		background-color: #000;
		color: #fff;
		border: 2px solid #000;
	}

	.google-login-button {
		border: 2px solid #747474;
	}

	.apple-icon,
	.google-icon {
		font-size: 18px;
		margin-bottom: 1px;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		background: #d6ecf0;
		justify-content: space-around;
	}

	.login-form {
		width: 80%;
		height: 60%;
		border-radius: 20px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}
</style>